Communicating with your backend using a webpage

In this section, you'll download a template chatbot webpage and configure it to make requests to your backend server.

First, let's clone a repository that has a template website and install your required libraries.
If your flask app is running, terminate it with Ctrl + C and run the following lines in the terminal:

  1. 1
  2. 2
  1. git clone https://github.com/ibm-developer-skills-network/LLM_application_chatbot
  2. python3.11 -m pip install -r LLM_application_chatbot/requirements.txt

If the operations are complete with no errors, then you have successfully obtained a copy of the template repository.

The file structure of this repo should be as follows:

  • ibm-chatbot-template/
    • static/
      • script.js
      • < other assets >
    • templates/
      • index.html

Let's move your flask app app.py to the LLM_application_chatbot/ folder so that you can host index.html on your server.

Both app.py and the LLM_application_chatbot/ folder should be in /home/project. You can move app.py into ibm_chatbot_template/ by running the following line in the terminal:

  1. 1
  1. mv app.py LLM_application_chatbot/

Alternatively, you may do the same by dragging and dropping in the IDE as follows:

  1. Navigate to the Explorer from the sidebar on the left
  2. Drag and drop app.py into LLM_application_chatbot/ (Be careful not to drop it in a subfolder)

After adding your flask app, the file structure should be as follows:

  • LLM_application_chatbot/
    • app.py
    • static/
      • script.js
      • < other assets >
    • templates/
      • index.html

Let's test this by running:

  1. 1
  2. 2
  1. cd LLM_application_chatbot/
  2. ls

You should see app.py in the output:


Since you've changed the location of app.py, you must re-open it in your editor. This is because the current tab for app.py tries to read from and write to app.py at a path that no longer exists.

Simply close the editor tab for app.py, and re-open it by clicking app.py in the explorer.


Now, let's modify your app.py so that you host index.html at <HOST>/. You can achieve this by adding the following route to your code:

  1. 1
  2. 2
  3. 3
  1. @app.route('/', methods=['GET'])
  2. def home():
  3. return render_template('index.html')

After adding the code, you can run your flask app with the following:

  1. 1
  1. flask run

Once your flask server is running, you may see the render of index.html by visiting <HOST>/.

Here's what you should see:


This template already has JavaScript code that emulates a chatbot interface. When you type a message and hit send, the website template does the following:

  1. Enter your input message into a text bubble
  2. Send your input to an endpoint (by default, this is set to www.example.com in the template)
  3. Wait for the response from the endpoint and put the response in a text bubble

You will not implement such an interface as it is beside the purpose of this lab.

Instead, you will make sure that in step 2, you send the user input to the route you created for your chatbot earlier: http://127.0.0.1:5000/chatbot.

To send the input, you open /static/script.js and find where the endpoint is set.


Let's change this endpoint to your chatbot route. In this example, www.example.com will replace

  1. 1
  2. 2
  1. 'https://sinanz-5000.theianext-0-labs-prod-misc-tools-us-east-0.proxy.cognitiveclass.ai/chatbot'

The URL may be different for you. Basically, copy the url in your app lanunch and add /chatbot at the end


And that should be it! Before testing your code, let's glance at the final version of your flask app:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  1. from flask import Flask, request, render_template
  2. from flask_cors import CORS
  3. import json
  4. from transformers import AutoModelForSeq2SeqLM, AutoTokenizer
  5. app = Flask(__name__)
  6. CORS(app)
  7. model_name = "facebook/blenderbot-400M-distill"
  8. model = AutoModelForSeq2SeqLM.from_pretrained(model_name)
  9. tokenizer = AutoTokenizer.from_pretrained(model_name)
  10. conversation_history = []
  11. @app.route('/', methods=['GET'])
  12. def home():
  13. return render_template('index.html')
  14. @app.route('/chatbot', methods=['POST'])
  15. def handle_prompt():
  16. data = request.get_data(as_text=True)
  17. data = json.loads(data)
  18. print(data) # DEBUG
  19. input_text = data['prompt']
  20. # Create conversation history string
  21. history = "\n".join(conversation_history)
  22. # Tokenize the input text and history
  23. inputs = tokenizer.encode_plus(history, input_text, return_tensors="pt")
  24. # Generate the response from the model
  25. outputs = model.generate(**inputs)
  26. # Decode the response
  27. response = tokenizer.decode(outputs[0], skip_special_tokens=True).strip()
  28. # Add interaction to conversation history
  29. conversation_history.append(input_text)
  30. conversation_history.append(response)
  31. return response
  32. if __name__ == '__main__':
  33. app.run()

Okay! Now let's test your app by stopping it first with Ctrl + C (if it's running) and restarting it with flask run.

In your terminal, you should see something like this:



And now let's navigate to your homepage at <HOST>/ and try out your chatbot!



Congratulations! If your output is similar, then you have just created your own chatbot website!

Author

Sina Nazeri (Ph.D.) linkedin

© IBM Corporation. All rights reserved.